@primaryColor:#000;
/* 常规面板 */
.layui-panel{position: relative; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); background-color: #fff; color: #666;}
/* 基础菜单元素 */
.layui-menu{position: relative; margin: 5px 0; background-color: #fff; box-sizing: border-box;}
.layui-menu *{box-sizing: border-box;}
.layui-menu li,
.layui-menu-body-title a{padding: 5px 15px;}
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;
	&::marker{
		content: "";
	}
}
.layui-menu li:hover{background-color: #F6F6F6; }

.layui-menu-item-parent:hover>.layui-menu-body-panel{display: block; animation-name: layui-fadein; animation-duration: 0.3s; animation-fill-mode: both; animation-delay:.2s;}
.layui-menu-item-parent .layui-menu-body-title,
.layui-menu-item-group .layui-menu-body-title{padding-right: 25px;}

.layui-menu .layui-menu-item-group:hover,
.layui-menu .layui-menu-item-none:hover,
.layui-menu .layui-menu-item-divider:hover{background: none; cursor: default;}
.layui-menu .layui-menu-item-group>ul{margin: 5px 0 -5px;}
.layui-menu .layui-menu-item-group>.layui-menu-body-title{color: rgba(0,0,0,.35); user-select: none;}
.layui-menu .layui-menu-item-none{color: rgba(0,0,0,.35); cursor: default;}

.layui-menu .layui-menu-item-none{text-align: center;}
.layui-menu .layui-menu-item-divider{margin: 5px 0; padding: 0; height: 0; line-height: 0; border-bottom: 1px solid #eee; overflow: hidden;}

.layui-menu .layui-menu-item-up:hover,
.layui-menu .layui-menu-item-down:hover{cursor: pointer;}
.layui-menu .layui-menu-item-up>.layui-menu-body-title{ color: rgba(0,0,0,.8);}
.layui-menu .layui-menu-item-up>ul{visibility: hidden; height: 0; overflow: hidden;}
.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon,
.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon{color: rgba(0,0,0,1);}
.layui-menu .layui-menu-item-down>ul{visibility: visible; height: auto;}

.layui-menu .layui-menu-item-checked,
.layui-menu .layui-menu-item-checked2{background-color: #F6F6F6!important; color: #5FB878;}
.layui-menu .layui-menu-item-checked a,
.layui-menu .layui-menu-item-checked2 a{color: #5FB878;}
.layui-menu .layui-menu-item-checked:after{position: absolute; right: 0; top: 0; bottom: 0; border-right: 3px solid #5FB878; content: "";}

.layui-menu-body-title{position: relative; overflow: hidden; text-overflow: ellipsis;}
.layui-menu-body-title a{display: block; margin: -5px -15px; color: rgba(0,0,0,.8);}
.layui-menu-body-title a:hover{transition: all .3s;}
.layui-menu-body-title>.layui-icon{position: absolute; right: 0; top: 0; font-size: 14px;}
.layui-menu-body-title>.layui-icon:hover{transition: all .3s;}
.layui-menu-body-title>.layui-icon-right{right: -1px;}
.layui-menu-body-panel{display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0;}
.layui-menu-body-panel:before{content: ""; position: absolute; width: 20px; left: -16px; top: 0; bottom: 0;}
.layui-menu-body-panel-left{left: auto; right: 100%; margin: 0 13px 0;}
.layui-menu-body-panel-left:before{left: auto; right: -16px;}

.layui-menu-lg li{line-height: 32px;}
.layui-menu-lg li:hover,
.layui-menu-lg .layui-menu-body-title a:hover{background: none; color: #5FB878;}
.layui-menu-lg li .layui-menu-body-panel{margin-left: 14px}
.layui-menu-lg li .layui-menu-body-panel-left{margin: 0 15px 0;}


.layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 66666666; margin: 5px 0; min-width: 100px;}
.layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
.zk-dropdown {
	@boderColor: #ccc;
	@arrowSize: 6px;
	// border: 1px solid red;
	height: auto;
	display: inline-block;
	cursor: pointer;
	position: relative;
	// display: flex;
	// flex-direction: column;
	&__btn {
		// border: 1px solid green;
		// z-index: 20;
		position: relative;
	}
	&__menu {
		// width: 100%;
		border: 1px solid @boderColor;
		box-sizing: border-box;
		padding: 4px;
		border-radius: 2px;
		left: 0;
		// word-break:keep-all;
		white-space: nowrap;
		// border: 1px solid #ddd;
		background: #fff;
		// position: absolute;
		// top: 38px;
		// left: 0;
		box-shadow: 2px 2px 2px #ddd;
		// display: none;
		// max-height: 0;
		// overflow: hidden;
		z-index: 1000;
		// background: #f00;
		// transition: max-height ease-out 0.2s;
		transform: translateY(-2px);
		transition: all 0.2s;
		position: absolute;
		opacity: 0;
		z-index: -1;
        min-width: 100%;
		&::before {
			position: absolute;
			top: (2 + @arrowSize / 2) * -1;
			// top: -8px;
			left: 9px;
			right: auto;
			// display: inline-block !important;
			// border-right: 8px solid transparent;
			// border-bottom: 8px solid @boderColor;
			// border-left: 8px solid transparent;
			transform: rotate(-45deg);
			content: "";
			width: @arrowSize;
			height: @arrowSize;
			background: #fff;
			border-top: 1px solid @boderColor;
			border-right: 1px solid @boderColor;
		}
	}
	&:hover &__menu {
		// max-height: 200px;
		// position: absolute;
		opacity: 1;
		z-index: 2;
		transform: translateY(2px);
		// display: block;
	}
	&--right {
		// .zk-dropdown__menu {
		// 	right: 0;
		// 	left: auto;
		// 	&::before {
		// 		right: 9px;
		// 		left: auto;
		// 	}
		// }
	}
	&--right &__menu {
		right: 0;
		left: auto;
		&::before {
			right: 9px;
			left: auto;
		}
	}
}
.ui-technology{
    body{
        background: #000;
    }
    .zk-dropdown{
        @boderColor:@primaryColor;
        @ddBg:darken(@primaryColor,20%);
        &__menu {
            border: 1px solid @boderColor;
            background: @ddBg;
            box-shadow: 2px 2px 2px fade(@ddBg,90%);
            &::before {
                background: @ddBg;
                border-top: 1px solid @boderColor;
                border-right: 1px solid @boderColor;
            }
        }
    }
}